<template>
<div>
  <el-row :gutter="10">
    <el-col span="7">
      <el-card >
        <img src="https://img.meituan.net/avatar/1b37bf869c9d7c7ec5861b37152d3e7c968002.jpg"
        width="100%">
        <el-button type="primary" round style="margin-top: 8px">更换头像</el-button>
        <p style="font-weight: lighter;font-size: 10px">支持JPG,JPEG,PNG格式，且文件需要小于1M</p>
      </el-card>
    </el-col>
    <el-col span="17">
      <el-card style="width: 600px" >
        <el-form label-width="80px">
          <el-form-item label="昵称:">
            <el-input type="text" value="暴龙战士"></el-input>
          </el-form-item>
          <el-form-item label="性别:" >
            <div style="margin-right: 400px">
              <input type="radio" name="gender" value="m" id="r1">
              <label for="r1">男</label>
              <input type="radio" name="gender" value="w" id="r2">
              <label for="r2">女</label>
            </div>
          </el-form-item>
          <el-form-item label="生日:">
            <template>
              <div class="block" style="margin-right: 250px;">
                <el-date-picker
                    v-model="value2"
                    align="left"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
              </div>
            </template>
          </el-form-item>
          <el-form-item label="生活状态:" >
            <div style="margin-right: 245px">
              <input type="radio"><label>单身</label>
              <input type="radio"><label>热恋</label>
              <input type="radio"><label>已婚</label>
              <input type="radio"><label>为人父母</label>
            </div>
          </el-form-item>
          <el-form-item label="从事行业:">
            <template>
              <el-select v-model="value" placeholder="请选择" style="margin-right: 345px">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="兴趣:">
            <el-checkbox-group v-model="form.type" style="margin-right: 150px;">
              <el-checkbox label="美食" name="type"></el-checkbox>
              <el-checkbox label="动漫" name="type"></el-checkbox>
              <el-checkbox label="摄影" name="type"></el-checkbox>
              <el-checkbox label="电影" name="type"></el-checkbox><br>
              <el-checkbox label="体育" name="type"></el-checkbox>
              <el-checkbox label="音乐" name="type"></el-checkbox>
              <el-checkbox label="财经" name="type"></el-checkbox>
              <el-checkbox label="游戏" name="type"></el-checkbox><br>
              <el-checkbox label="科技" name="type"></el-checkbox>
              <el-checkbox label="旅游" name="type"></el-checkbox>
              <el-checkbox label="文学" name="type"></el-checkbox>
              <el-checkbox label="骑车" name="type" style="margin-right: 30px"></el-checkbox>
            </el-checkbox-group>
            <p style="font-weight: lighter;margin-right: 170px;
             margin-top: -17px;font-size: 10px">选择你的兴趣使你获得个性化的电影推荐哦</p>
          </el-form-item>
          <el-form-item label="个性签名:">
            <el-input placeholder="20个字以内"></el-input>
          </el-form-item>
          <el-button type="info" round>保存</el-button>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
export default {
  name: "PersonalIndexView",
  data() {
    return {
      options: [{value: '选项1', label: '信息技术'},
        {value: '选项2', label: '金融保险'},
        {value: '选项3', label: '商业服务'},
        {value: '选项4', label: '建筑地产'},
        {value: '选项5', label: '交通运输'}],
      value: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value1: '',
      value2: '',
      form:{type:[]}
    }
  },
}
</script>

<style scoped>

</style>